import React, { Component } from 'react'
import '../science.css';
import { SearchOutlined } from '@ant-design/icons';
import { Tabs } from 'react-vant';
import { Swipe } from 'react-vant';
import user from '../image/维固力.png'
import user1 from '../image/轮播.PNG'
import user2 from '../image/轮播3.PNG'
import user3 from '../image/轮播6.PNG'
import axios from "axios";



export default class Science extends Component {
    state = {
        hotData: '',
        title: ''
    }
    componentDidMount() {
        //热点
        axios({
            url: "/api/hotdata",
            method: "post"
        }).then(res => {
            this.setState({
                hotData: res.data.data,
            })
        })
        //话题
        axios({
            url: "/api/title",
            method: "post"
        }).then(res => {
            this.setState({
                title: res.data.data,
            })
        })
    }
    //搜索
    onSearch = (value) => {

        axios({
            url: '/api/searchshop',
            method: 'post',
            data: { value: value }
        }).then(res => {
            this.setState({
                hotData: res.data.data
            })
            console.log(res);
        })
    }



    render() {
        const { hotData, title } = this.state;
        return (
            <div className="science">
                <header>
                    <div className="search">
                        <SearchOutlined />
                        <input placeholder="请输入你要搜索内容" type="text" onChange={(e) => this.onSearch(e.target.value)}></input>
                    </div>
                </header>
                <main>
                    <div className="tab">
                        <Tabs active="active" titleActiveColor="#1DE443">
                            <Tabs.TabPane title="热点" >
                                <div className="hot">
                                    <div className="swipe">
                                        <Swipe
                                            autoplay={3000}
                                            pagination={{
                                                renderBullet: (index, className) => {
                                                    return `<span class="custom-pagination--bullet ${className}"></span>`;
                                                },
                                            }}
                                        >
                                            <Swipe.Item>
                                                <img src={user} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user} alt="" />
                                            </Swipe.Item>
                                        </Swipe>
                                    </div>
                                    <div className="body">
                                        {
                                            hotData.length && hotData.map((item, index) => {
                                                return <div className="box" key={index}>
                                                    <div className="left">
                                                        <img src={item.img} alt="" />
                                                    </div>
                                                    <div className="right">
                                                        <div className="top">
                                                            <p>{item.title}</p>
                                                        </div>
                                                        <div className="bottom">
                                                            <p>生活</p>
                                                            <p>{item.date}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            })
                                        }
                                    </div>
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane title="话题">
                                <div className="title1">
                                    {
                                        title.length && title.map((item, index) => {
                                            return <div className="he" key={index}>
                                                <div className="she">
                                                    <img src={item.img} alt="" />
                                                    <p>{item.name}</p>
                                                    <span>{item.date}</span>
                                                </div>
                                                <div className="they">
                                                    <h4>{item.title}</h4>
                                                    <p>{item.desc}</p>
                                                </div>
                                                <div className="peo">
                                                    <p>阅读量{item.read}</p>
                                                    <p>赞{item.good}</p>
                                                </div>
                                            </div>
                                        })
                                    }
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane title="生活">
                                <div className="hot">
                                    <div className="swipe">
                                        <Swipe
                                            autoplay={3000}
                                            pagination={{
                                                renderBullet: (index, className) => {
                                                    return `<span class="custom-pagination--bullet ${className}"></span>`;
                                                },
                                            }}
                                        >
                                            <Swipe.Item>
                                                <img src={user1} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user1} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user1} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user1} alt="" />
                                            </Swipe.Item>
                                        </Swipe>
                                    </div>
                                    <div className="body">
                                        {
                                            hotData.length && hotData.map((item, index) => {
                                                return <div className="box" key={index}>
                                                    <div className="left">
                                                        <img src={item.img} alt="" />
                                                    </div>
                                                    <div className="right">
                                                        <div className="top">
                                                            <p>{item.title}</p>
                                                        </div>
                                                        <div className="bottom">
                                                            <p>生活</p>
                                                            <p>{item.date}</p>
                                                        </div>
                                                    </div>

                                                </div>
                                            })
                                        }
                                    </div>
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane title="睡眠">
                                <div className="hot">
                                    <div className="swipe">
                                        <Swipe
                                            autoplay={3000}
                                            pagination={{
                                                renderBullet: (index, className) => {
                                                    return `<span class="custom-pagination--bullet ${className}"></span>`;
                                                },
                                            }}
                                        >
                                            <Swipe.Item>
                                                <img src={user2} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user2} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user2} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user2} alt="" />
                                            </Swipe.Item>
                                        </Swipe>
                                    </div>
                                    <div className="body">
                                        {
                                            hotData.length && hotData.map((item, index) => {
                                                return <div className="box" key={index}>
                                                    <div className="left">
                                                        <img src={item.img} alt="" />
                                                    </div>
                                                    <div className="right">
                                                        <div className="top">
                                                            <p>{item.title}</p>
                                                        </div>
                                                        <div className="bottom">
                                                            <p>生活</p>
                                                            <p>{item.date}</p>
                                                        </div>
                                                    </div>

                                                </div>
                                            })
                                        }
                                    </div>
                                </div>
                            </Tabs.TabPane>
                            <Tabs.TabPane title="男性">
                                <div className="hot">
                                    <div className="swipe">
                                        <Swipe
                                            autoplay={3000}
                                            pagination={{
                                                renderBullet: (index, className) => {
                                                    return `<span class="custom-pagination--bullet ${className}"></span>`;
                                                },
                                            }}
                                        >
                                            <Swipe.Item>
                                                <img src={user3} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user3} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user3} alt="" />
                                            </Swipe.Item>
                                            <Swipe.Item>
                                                <img src={user3} alt="" />
                                            </Swipe.Item>
                                        </Swipe>
                                    </div>
                                    <div className="body">
                                        {
                                            hotData.length && hotData.map((item, index) => {
                                                return <div className="box" key={index}>
                                                    <div className="left">
                                                        <img src={item.img} alt="" />
                                                    </div>
                                                    <div className="right">
                                                        <div className="top">
                                                            <p>{item.title}</p>
                                                        </div>
                                                        <div className="bottom">
                                                            <p>生活</p>
                                                            <p>{item.date}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            })
                                        }
                                    </div>
                                </div>
                            </Tabs.TabPane>
                        </Tabs>
                    </div>
                </main>
            </div>
        )
    }
}